<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="favicon.ico">

<title>Scattered Polaroids Gallery</title>

<!--必要样式-->
<link rel="stylesheet" type="text/css" href="asset/css/component.css" />

<script type="text/javascript" src="js/modernizr.min.js"></script>
<link rel="stylesheet" href="asset/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="asset/css/style.css" type="text/css">

</head>
<body  class="no-js">
	
	<div class="container" >
		<div class="row">
			<div class="col-md-1">
				<div class="avatar-circle" >
					<img style="margin:10px 0px 0px 0px;" class="circle"src="asset/image/avatarKen.png"/>
				</div>
			</div>
			<div class="col-md-8">
			<div style="margin:25px 0px 0px 0px; font-family: Time" >
				<p>我的名字是KenBoNely！</p>
			</div>
			</div>
			<a id="port_a" href="portfolio.html" style="display: none;">作品集</a>
			<a id="set_a" href="setting.html" style="display: none;">设置</a>
			<a id="exit_a" href="index_logout.html" style="display: none;">退出</a>

			<div class="col-md-1">
				<div class="imgbutton portbutton" id="portfolio" style="margin: 0px 0px 0px 0px;" onclick="port_a.click()"></div>
			</div>
			<div class="col-md-1">
				<div class="imgbutton setbutton" id="setting" style="margin: 0px 0px 0px 0px;" onclick="set_a.click()"></div>
			</div>
			<div class="col-md-1">
				<div class="imgbutton exitbutton" id="exit" style="margin: 0px 0px 0px 0px;" onclick="exit_a.click()"></div>
			</div>
		</div>
	</div>
	<!-- 下面是动态的图片展示栏-->
	<br>
	<div class="container" >
		<section id="photostack-1" class="photostack photostack-start">
			<div>
				<figure>
					<a class="photostack-img"><img src="img/4.jpg" alt="img04"/></a>
					<figcaption>
						<a href="blog_id.html" ><h2 class="photostack-title">Heaven of time</h2></a>
						<div class="photostack-back">
							<p>What might be right for you may not be right for some. And we know Flipper lives in a world full of wonder flying there-under under the sea.</p>
						</div>
					</figcaption>
				</figure>
				<figure>
					<a href="blog_id.html" class="photostack-img"><img src="img/5.jpg" alt="img05"/></a>
					<figcaption>
						<h2 class="photostack-title">Speed Racer</h2>
					</figcaption>
				</figure>
				<figure data-shuffle-iteration="2">
					<a href="blog_id.html" class="photostack-img"><img src="img/1.jpg" alt="img01"/></a>
					<figcaption>
						<h2 class="photostack-title">Serenity Beach</h2>
						<div class="photostack-back">
							<p>I have never been to a place so serene in my entire life before. Swimming in clear waters opened my mind to nature and reminded me of my and <span>eveybody</span> everybody else's mortality.</p>
						</div>
					</figcaption>
				</figure>
				<figure>
					<a href="blog_id.html" class="photostack-img"><img src="img/2.jpg" alt="img02"/></a>
					<figcaption>
						<h2 class="photostack-title">Happy Days</h2>
						<div class="photostack-back">
							<p>These Happy Days are yours and mine Happy Days. It's a beautiful day in this neighborhood a beautiful day for a neighbor. Would you be mine?</p>
						</div>
					</figcaption>
				</figure>
				<!-- 以下是不会有反面的图片 -->
				<figure data-shuffle-iteration="3">
					<a href="blog_id.html" class="photostack-img"><img src="img/3.jpg" alt="img03"/></a>
					<figcaption>
						<h2 class="photostack-title">Beautywood</h2>
					</figcaption>
				</figure>
				<figure data-shuffle-iteration="2">
					<a href="blog_id.html" class="photostack-img"><img src="img/6.jpg" alt="img06"/></a>
					<figcaption>
						<h2 class="photostack-title">Forever this</h2>
					</figcaption>
				</figure>
				<!-- 以下是不会在中心展示出来的图片 -->
				<figure data-dummy>
					<a href="#" class="photostack-img"><img src="img/7.jpg" alt="img07"/></a>
					<figcaption>
						<h2 class="photostack-title">Lovely Green</h2>
					</figcaption>
				</figure>
				<figure data-dummy>
					<a href="#" class="photostack-img"><img src="img/8.jpg" alt="img08"/></a>
					<figcaption>
						<h2 class="photostack-title">Wonderful</h2>
					</figcaption>
				</figure>
				<figure data-dummy>
					<a href="#" class="photostack-img"><img src="img/9.jpg" alt="img09"/></a>
					<figcaption>
						<h2 class="photostack-title">Love Addict</h2>
					</figcaption>
				</figure>
				<figure data-dummy>
					<a href="#" class="photostack-img"><img src="img/10.jpg" alt="img10"/></a>
					<figcaption>
						<h2 class="photostack-title">Friendship</h2>
					</figcaption>
				</figure>
				<figure data-dummy>
					<a href="#" class="photostack-img"><img src="img/11.jpg" alt="img11"/></a>
					<figcaption>
						<h2 class="photostack-title">White Nights</h2>
					</figcaption>
				</figure>
				<figure data-dummy>
					<a href="#" class="photostack-img"><img src="img/12.jpg" alt="img12"/></a>
					<figcaption>
						<h2 class="photostack-title">Serendipity</h2>
					</figcaption>
				</figure>
				<figure data-dummy>
					<a href="#" class="photostack-img"><img src="img/13.jpg" alt="img13"/></a>
					<figcaption>
						<h2 class="photostack-title">Pure Soul</h2>
					</figcaption>
				</figure>
				<figure data-dummy>
					<a href="#" class="photostack-img"><img src="img/14.jpg" alt="img14"/></a>
					<figcaption>
						<h2 class="photostack-title">Winds of Peace</h2>
					</figcaption>
				</figure>
				<figure data-dummy>
					<a href="#" class="photostack-img"><img src="img/15.jpg" alt="img15"/></a>
					<figcaption>
						<h2 class="photostack-title">Shades of blue</h2>
					</figcaption>
				</figure>
				<figure data-dummy>
					<a href="#" class="photostack-img"><img src="img/16.jpg" alt="img16"/></a>
					<figcaption>
						<h2 class="photostack-title">Lightness</h2>
					</figcaption>
				</figure>
			</div>
			<!-- 这里出现了一个nav……emmm -->
		</section>
	</div><!-- /container -->
	<br>
		<footer>
			<div class="row">
				<div class="text-center"><p><small>&copy; Copyright DAM</small></p></div>
			</div>
		</footer>
	<img src="asset/image/footer.png">
<script type="text/javascript" src="js/classie.js"></script>
<script type="text/javascript" src="js/photostack.js"></script>
<script type="text/javascript">
// [].slice.call( document.querySelectorAll( '.photostack' ) ).forEach( function( el ) { new Photostack( el ); } );
new Photostack( document.getElementById( 'photostack-1' ), {
	callback : function( item ) {
		//console.log(item)
	}
} );
</script>
	<script src="asset/jquery/jquery.min.js"></script>
	<script src="asset/bootstrap/js/bootstrap.min.js"></script>

</body>
</html>
